<template>
    <view class="container">
        <!-- 顶部标题 -->
        <view class="header">
            <text class="header-title">学习笔记收藏</text>
        </view>

        <!-- 搜索框 -->
        <view class="search-container">
            <input
                class="search-input"
                type="text"
                v-model="searchText"
                placeholder="搜索笔记标题或分类"
                @input="filterNotes"
            />
        </view>

        <!-- 收藏内容展示 -->
        <scroll-view class="notes-list" scroll-y>
            <view class="note-item" v-for="(note, index) in filteredNotes" :key="index">
                <view class="note-card">
                    <!-- 笔记头部 -->
                    <view class="note-header">
                        <text class="note-title">{{ note.title }}</text>
                        <text class="note-time">{{ note.time }}</text>
                    </view>

                    <!-- 笔记分类 -->
                    <view class="note-category">分类: {{ note.category }}</view>

                    <!-- 笔记备注（限制行数显示省略号） -->
                    <view class="note-notes">{{ truncateText(note.notes, 50) }}</view>

                    <!-- 笔记图片 -->
                    <image v-if="note.image" class="note-image" :src="note.image" />

                    <!-- 底部操作按钮 -->
                    <view class="note-footer">
                        <button class="detail-button" @click="viewDetails(note)">查看详情</button>
                        <button class="delete-button" @click="confirmDelete(index)">删除</button>
                    </view>
                </view>
            </view>
            <view v-if="filteredNotes.length === 0" class="no-data">暂无收藏内容...请前往问答匣提问后进行收藏~</view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            notes: [], // 原始收藏的笔记数据
            filteredNotes: [], // 搜索过滤后的笔记数据
            searchText: '' // 搜索框输入内容
        };
    },
    onShow() {
        this.loadNotes();
    },
    methods: {
        loadNotes() {
            // 从本地存储加载收藏的笔记
            this.notes = uni.getStorageSync('favorites') || [];
            this.filteredNotes = [...this.notes];
        },
        filterNotes() {
            // 根据搜索框内容过滤笔记
            const search = this.searchText.toLowerCase();
            this.filteredNotes = this.notes.filter(
                (note) =>
                    note.title.toLowerCase().includes(search) ||
                    note.category.toLowerCase().includes(search)
            );
        },
        truncateText(text, maxLength) {
            // 限制内容长度，超出用省略号表示
            return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
        },
        viewDetails(note) {
            // 跳转到详情页
            uni.navigateTo({
                url: `/pages/detail/detail?data=${encodeURIComponent(JSON.stringify(note))}`
            });
        },
        confirmDelete(index) {
            // 弹出确认框
            uni.showModal({
                title: '确认删除',
                content: '确定要删除这条笔记吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.deleteNote(index);
                    }
                }
            });
        },
        deleteNote(index) {
            // 删除笔记
            this.notes.splice(index, 1);
            this.filteredNotes = [...this.notes];
            uni.setStorageSync('favorites', this.notes);
            uni.showToast({ title: '删除成功', icon: 'success' });
        }
    }
};
</script>

<style scoped>
/* 页面整体样式 */
.container {
    background-color: #f7f8fa;
    min-height: 100vh;
    padding: 20rpx;
}

/* 顶部标题 */
.header {
    text-align: center;
    margin-bottom: 20rpx;
}
.header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #7e57c2;
}

/* 搜索框 */
.search-container {
    margin-bottom: 20rpx;
    padding: 0 20rpx;
}
.search-input {
    width: 100%;
    height: 80rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    border: 1rpx solid #ddd;
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 收藏内容列表 */
.notes-list {
    padding: 20rpx;
    overflow-y: scroll;
}

/* 单条笔记 */
.note-item {
    margin-bottom: 20rpx;
}
.note-card {
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    padding: 20rpx;
    display: flex;
    flex-direction: column;
	min-height: 200rpx; /* 确保卡片有一定的最小高度 */
}

/* 笔记头部 */
.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
}
.note-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}
.note-time {
    font-size: 24rpx;
    color: #999;
}

/* 笔记分类 */
.note-category {
    font-size: 26rpx;
    color: #555;
    margin-bottom: 10rpx;
}

/* 笔记备注 */
.note-notes {
    font-size: 26rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 10rpx;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 限制显示三行 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
	flex-grow: 1; /* 确保备注部分可以根据需要扩展 */
}

/* 笔记图片 */
.note-image {
    display: block;
    width: 100%;
    height: 300rpx;
    object-fit: contain;
    border-radius: 12rpx;
    margin-bottom: 10rpx;
}

/* 底部操作按钮 */
.note-footer {
    display: flex;
    justify-content: space-between;
	margin-top: auto; /* 确保按钮始终位于底部 */
}
.detail-button,
.delete-button {
    flex: 1;
    padding: 10rpx;
    font-size: 28rpx;
    border: none;
    border-radius: 12rpx;
    text-align: center;
    margin: 0 5rpx;
    cursor: pointer;
    color: #fff;
}
.detail-button {
    background-color: #7e57c2;
}
.detail-button:hover {
    background-color: #673ab7;
}
.delete-button {
    background-color: #9a9a9a;
}
.delete-button:hover {
    background-color: #3b3b3b;
}

/* 无数据提示 */
.no-data {
    text-align: center;
    font-size: 28rpx;
    color: #999;
    padding: 20rpx 0;
}
</style>
